<template>
	<div>
		<div class="bfff main align-start w1450 mt20">
			<div class="left"></div>
			<div class="right flex1">
				<!-- 顶部筛选 -->
				<div class="center filter-box">
					<!-- 左侧筛选 -->
					<div class="flex1">
						<div class="tabs flex-start f14">
							<div class="tab posr hover" v-for="(v,i) in tabs" :class="tabIndex==i?'active':''"
								@click="tabIndex=i">{{v}}</div>
						</div>
						<div class="flex-start mb15">
							<div class="f12">考试类型</div>
							<el-button :type="typeIndex==i?'primary':'default'" :plain="typeIndex!=i"
								v-for="(v,i) in types" class="mb20" @click="typeIndex=i" size="small">{{v}}</el-button>
						</div>
						<div class="flex-start">
							<div class="f12">考试状态</div>
							<el-button :type="statusIndex==i?'primary':'default'" :plain="statusIndex!=i"
								v-for="(v,i) in status" class="mb20" @click="statusIndex=i"
								size="small">{{v}}</el-button>
						</div>
					</div>
					<!-- 右侧搜索统计部份 -->
					<div class="">
						<div class="flex-end total">
							<div class="colum">
								<div class="ctheme mb5 align-end">
									<div class="f30 fbold">5</div>
									<div class="f12 ml5 mb5">次</div>
								</div>
								<div class="f12">应参加考试</div>
							</div>
							<div class="colum">
								<div class="ctheme mb5 align-end">
									<div class="f30 fbold">4</div>
									<div class="f12 ml5 mb5">次</div>
								</div>
								<div class="f12">已考试</div>
							</div>
							<div class="colum">
								<div class="ctheme mb5 align-end">
									<div class="f30 fbold">1</div>
									<div class="f12 ml5 mb5">次</div>
								</div>
								<div class="f12">缺考</div>
							</div>
							<div class="colum">
								<div class="ctheme mb5 align-end">
									<div class="f30 fbold">60</div>
									<div class="f12 ml5 mb5">%</div>
								</div>
								<div class="f12">及格率</div>
							</div>
						</div>
						<div class="flex-end">
							<div class="input-box center">
								<i class="el-icon-search"></i>
								<input class="flex1 f14 c333" type="text" v-model="name" placeholder="请输入培训名称/活动名称" />
								<div class="btheme center f14 cfff pointer">搜索</div>
							</div>
							<div class="ctheme f14 ml40 pointer" @click="reset">重置</div>
						</div>
					</div>
				</div>
				<!-- 主体列表 -->
				<div class="right-main mt20">
					<!-- status1-4对应四种状态 默认status1 -->
					<div class="main-box " :class="'status'+v" v-for="v in 10">
						<div class="center">
							<div class="flex1 nowrap f14">矿井安全生产月班组考试显示一行超出隐藏右矿井安全生产月班组考试显示一行超出隐藏右矿井安全生产月班组考试显示一行超出隐藏右
							</div>
							<div class="f12 statu-text" v-if="v==1">·待开考·</div>
							<div class="f12 statu-text" v-else>·考试中·</div>
						</div>
						<div class="mt5 mb5 f12 c878 center">
							<div class="tag-main mr10 center cfff f12" v-if="v!=1">补考</div>
							<div class="flex1">考试开始：2023-12-21 08:30 考试截止：2023-12-21 08:30 考试时长：01小时30分</div>
							<div class="f12 link">查看历史成绩</div>
						</div>
						<div class="space-between">
							<div class="tag f12 nowrap">来自活动：煤炭环境与防治技术专题讲座显示一行超出隐藏</div>
							<div class="center join-btn f14">进入考试</div>
						</div>
					</div>
				</div>
				<!-- 底部分页 -->
				<div class="center page-box mt30">
					<div class="flex1 flex-start">
						<el-tag effect="dark" size="mini" type="primary">补考</el-tag>
						<el-tag effect="dark" size="mini" type="success">补考</el-tag>
						<el-tag effect="dark" size="mini" type="warning">补考</el-tag>
					</div>
					<el-pagination background :current-page.sync="currentPage3" :page-size="pageSize3"
						layout="prev, pager, next, sizes, jumper" :total="120" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				tabs: ['全部考试', '培训考试', '活动考试', '日常考试'],
				tabIndex: 0,
				types: ['初考·12', '补考·6'],
				typeIndex: 0,
				status: ['待考试·33', '已完成·2', '缺考·3'],
				statusIndex: 0,
				currentPage3: 1,
				pageSize3: 10,
				name: ''
			}
		},
		created() {

		},
		methods: {
			handleSizeChange(val) {
				console.log(`${val} items per page`)
			},
			handleCurrentChange(val) {
				console.log(`current page: ${val}`)
			},
			reset() {
				this.name = ''
			}
		}
	}
</script>
<style lang='scss' scoped>
	::v-deep .right-main {
		height: 658px;
		overflow-y: scroll;

		.c878 {
			width: 935px;
		}

		.join-btn {
			width: 100px;
			height: 30px;
			background: #EBF2F8;
			border-radius: 15px;
			color: #CFDCE8;
			cursor: pointer;

			&:hover {
				opacity: .8;
			}
		}

		.tag-main {
			width: 32px;
			height: 17px;
			background: #007BFF;
			border-radius: 2px;
		}

		.tag {
			width: 935px;
			height: 22px;
			line-height: 22px;
			color: #2BCC7D;
			background: #E8FBEC;
			border-radius: 2px;
		}

		.statu-text {
			color: #BBC2DE;
		}

		.status1 {
			.join-btn {
				cursor: not-allowed;
			}
		}

		.status2 {

			.join-btn,
			.tag-main {
				background: #2BCC7D;
				color: #fff;
			}

			.tag {
				color: #2BCC7D;
				background: #E8FBEC;
			}

			.statu-text {
				color: #2BCC7D;
			}
		}

		.status3 {
			.link {
				color: #007BFF;
			}

			.join-btn {
				background: #007BFF;
				color: #fff;
			}

			.tag {
				color: #007BFF;
				background: #EBF2F8;
			}

			.statu-text {
				color: #007BFF;
			}
		}

		.status4 {
			.link {
				color: #FF9B00;
			}

			.join-btn,
			.tag-main {
				background: #FF9B00;
				color: #fff;
			}

			.tag {
				color: #FF9B00;
				background: #F8F5EB;
			}

			.statu-text {
				color: #FF9B00;
			}
		}

		.main-box {
			background: #F7FBFE;
			border-radius: 4px;
			padding: 10px;
			margin: 0 0 12px;
		}
	}

	::v-deep .right {
		padding: 20px;

		.page-box {
			.el-tag--dark {
				margin-right: 27px;
			}
		}

		.filter-box {

			input::placeholder {
				color: #CFDCE8;
				font-size: 14px;
			}

			.btheme {
				width: 80px;
				height: 30px;
				background: #007BFF;
				border-radius: 0px 4px 4px 0px;
			}

			.el-icon-search {
				margin: 0 4px 0 10px;
				color: #CFDCE8;
			}

			.input-box {
				width: 408px;
				height: 30px;
				background: #EBF2F8;
				border-radius: 4px;
				overflow: hidden;
			}

			.total {
				margin-bottom: 38px;
			}

			.colum {
				margin-left: 77px;
			}

			.el-button {
				width: 100px;
				margin-left: 20px;
				margin-bottom: 0;
			}

			.tabs {
				.tab {
					margin-right: 50px;
					height: 44px;
				}

				.active::after {
					content: '';
					width: 18px;
					height: 4px;
					background: #007BFF;
					border-radius: 2px;
					position: absolute;
					left: 18px;
					top: 25px;
				}
			}
		}


	}

	.left {
		width: 180px;
		border-right: 1px solid #EBF2F8;
		height: 910px;
	}

	.main {
		border-radius: 8px;
		border: 1px solid #EBF2F8;
	}
</style>